<template>
	<view class="content">
		<view class="banner" v-if="jinpaiType==0&&vipFlag==0">
			<image class="banner-image" src="http://images.linglinggong.net/icon3/456998.png" mode="aspectFill"></image>
			<view class="banner-text">
				<view>金牌临时工</view>
				<view>开通金牌·享受更多权益</view>
			</view>
			<view class="banner-button" @click="isPay()">{{Gold_medal_amount/100}}元开通</view>
		</view>
		<view class="banner-yellow" v-if="vipFlag==jinpaiType&&isShowJindu">
			<view class="banner-yellow-content">
				<image class="banner-yellow-content-image" style="margin-right: 16rpx;"
					src="http://images.linglinggong.net/icon3/1231weqwqe.png" mode="aspectFill"></image>
				<text
					class="banner-yellow-content-text">{{jinpaiType==0?'升级金牌临时工进度':jinpaiType==1?'升级金牌临时工进度':''}}</text>
				<image class="banner-yellow-content-image" style="transform: rotate(180deg);margin-left: 16rpx;"
					src="http://images.linglinggong.net/icon3/1231weqwqe.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="banner-yellow-info" v-if="vipFlag==jinpaiType&&isShowJindu">
			<view class="banner-yellow-info-item">
				<view>
					<view>
						<text class="banner-yellow-info-item-title">接单天数</text>
						<text class="banner-yellow-info-item-title-info">({{ list.mDay }}天)</text>
					</view>
					<view>
						<text class="banner-yellow-info-item-num" v-if="list.alreadyDay>=list.mDay">已满足</text>
						<view v-else>
							<text class="banner-yellow-info-item-num">{{ list.alreadyDay }}</text>
							<text class="banner-yellow-info-item-nums">/{{ list.mDay }}</text>
						</view>
					</view>
				</view>
				<view>
					<view class="banner-yellow-info-item-jindu-y"
						:style="{width:(list.alreadyDay/list.mDay)*642<642?(list.alreadyDay/list.mDay)*642+'rpx':'642rpx'}">
					</view>
					<view class="banner-yellow-info-item-jindu-n"></view>
				</view>
			</view>
			<view class="banner-yellow-info-item">
				<view>
					<view>
						<text class="banner-yellow-info-item-title">工作时长</text>
						<text class="banner-yellow-info-item-title-info">({{ list.mTime }}小时)</text>
					</view>
					<view>
						<text class="banner-yellow-info-item-num" v-if="list.alreadyTime>=list.mTime">已满足</text>
						<view v-else>
							<text class="banner-yellow-info-item-num">{{list.alreadyTime}}</text>
							<text class="banner-yellow-info-item-nums">/{{ list.mTime }}</text>
						</view>
					</view>
				</view>
				<view>
					<view class="banner-yellow-info-item-jindu-y"
						:style="{width:(list.alreadyTime/list.mTime)*642<642?(list.alreadyTime/list.mTime)*642+'rpx':'642rpx'}">
					</view>
					<view class="banner-yellow-info-item-jindu-n"></view>
				</view>
			</view>
			<view class="banner-yellow-info-item">
				<view>
					<view>
						<text class="banner-yellow-info-item-title">雇主数</text>
						<text class="banner-yellow-info-item-title-info">({{ textlie }}人)</text>
					</view>
					<view>
						<text class="banner-yellow-info-item-num" v-if="list.numberuserid>=textlie">已满足</text>
						<view v-else>
							<text class="banner-yellow-info-item-num">{{list.numberuserid}}</text>
							<text class="banner-yellow-info-item-nums">/{{ textlie }}</text>
						</view>
					</view>
				</view>
				<view>
					<view class="banner-yellow-info-item-jindu-y"
						:style="{width:(list.numberuserid/textlie)*642<642?(list.numberuserid/textlie)*642+'rpx':'642rpx'}">
					</view>
					<view class="banner-yellow-info-item-jindu-n"></view>
				</view>
			</view>
			<view class="banner-yellow-info-item">
				<view>
					<view>
						<text class="banner-yellow-info-item-title">差评数</text>
						<text class="banner-yellow-info-item-title-info">(小于{{ list.mBadLimit }}个)</text>
					</view>
					<view>
						<text class="banner-yellow-info-item-num-r" v-if="list.alreadyBad>list.mBadLimit">不满足</text>
						<view v-else>
							<text class="banner-yellow-info-item-num-r">{{list.alreadyBad}}</text>
							<text class="banner-yellow-info-item-nums-r">/{{ list.mBadLimit }}</text>
						</view>
					</view>
				</view>
				<view>
					<view class="banner-yellow-info-item-jindu-r"
						:style="{width:list.mBadLimit!=0?((list.alreadyBad/list.mBadLimit)*642<642?(list.alreadyBad/list.mBadLimit)*642+'rpx':'642rpx'):list.alreadyBad==0?'0rpx':'642rpx'}">
					</view>
					<view class="banner-yellow-info-item-jindu-n"></view>
				</view>
			</view>
		</view>
		<view class="putongquanyi" v-show="jinpaiType==0">
			<text class="putongquanyi-title">普通权益</text>
			<view class="putongquanyi-content">
				<view class="putongquanyi-content-item">
					<image src="http://images.linglinggong.net/icon3/213ergh.png" mode="aspectFill"></image>
					<text>推送附近</text>
					<text>任务</text>
				</view>
				<view class="putongquanyi-content-item">
					<image src="http://images.linglinggong.net/icon3/wqeqwewq3.png" mode="aspectFill"></image>
					<text>线上结算</text>
					<text>保障</text>
				</view>
				<view class="putongquanyi-content-item">
					<image src="http://images.linglinggong.net/icon3/wqeqwewq1.png" mode="aspectFill"></image>
					<text>定期提现</text>
					<text>免费</text>
				</view>
				<view class="putongquanyi-content-item">
					<image src="http://images.linglinggong.net/icon3/wqeqwewq2.png" mode="aspectFill"></image>
					<text>反馈响应</text>
					<text>客服</text>
				</view>
			</view>
		</view>
		<view class="jinpaiquanyi" v-show="jinpaiType==1">
			<text class="jinpaiquanyi-title">金牌权益</text>
			<view class="jinpaiquanyi-content">
				<view class="jinpaiquanyi-item">
					<image src="http://images.linglinggong.net/icon3/qwe234554351.png" mode="aspectFill"></image>
					<text>专属金牌</br>任务</text>
				</view>
				<view class="jinpaiquanyi-item">
					<image src="http://images.linglinggong.net/icon3/qwe234554352.png" mode="aspectFill"></image>
					<text>任务工时</br>补贴</text>
				</view>
				<view class="jinpaiquanyi-item" style="height: 125rpx;">
					<image src="http://images.linglinggong.net/icon3/qwe234554353.png" mode="aspectFill"></image>
					<text>提现免费</text>
				</view>
				<view class="jinpaiquanyi-item">
					<image src="http://images.linglinggong.net/icon3/qwe234554354.png" mode="aspectFill"></image>
					<text>专属客服</br>对接</text>
				</view>
				<view class="jinpaiquanyi-item">
					<image src="http://images.linglinggong.net/icon3/qwe234554355.png" mode="aspectFill"></image>
					<text>升级奖励</br>100元</text>
				</view>
				<view class="jinpaiquanyi-item">
					<image src="http://images.linglinggong.net/icon3/qwe234554356.png" mode="aspectFill"></image>
					<text>工作中</br>可接单</text>
				</view>
				<view class="jinpaiquanyi-item">
					<image src="http://images.linglinggong.net/icon3/qwe234554357.png" mode="aspectFill"></image>
					<text>更多权益</br>敬请期待</text>
				</view>
			</view>
		</view>
		<view class="jinpai_button" v-if="jinpaiType==1" @click="goJipaiTask()">
			<image src="http://images.linglinggong.net/icon3/qwe234554351.png" mode="aspectFill"></image>
			<view class="jinpai_button-text">
				<view class="jinpai_button-text-title-view"><text class="jinpai_button-text-title">金牌专属任务</text>
					<view class="jinpai_button-text-title-fuben">限时</view>
				</view>
				<text class="jinpai_button-text-info">这里汇集所有金牌任务</text>
			</view>
			<image class="jinpai_button-text-back" src="http://images.linglinggong.net/icon3/234tejk.png"
				mode="aspectFill"></image>
		</view>
		<view class="shuoming" v-show="jinpaiType==0">
			<text>普通临时工说明</text>
			<text> 普通临时工： 新用户注册即为普通临时工 普通临时工享有权益： 1.推送附近任务：推送附近5公里内的任务 2.线上结算保障：保障线上交易资金安全性 3.定期提现金免费：每周二提现不收取服务费
				4.反馈响应客服：问题反馈随时在线解答 普通临时工的限制： 1. 只可接取普通任务 2. 提现收取3%服务费 </text>
		</view>
		<view class="jinpai-shuoming" v-show="jinpaiType==1" :style="{'margin-bottom':vipFlag==1?'30rpx':'0'}">
			<text>金牌临时工说明</text>
			<text> 金牌临时工由普通临时工升级而来 金牌临时工享有权益： 1.专属金牌任务：该类型任务只限金牌可以接取 2.任务工时补贴：专属任务附带每小时工价补贴 3.永久免费提现：金牌提现不收取服务费
				4.专属客服对接：专属客服为您第一时间解决问题 5.升级奖励100元：完成金牌各项指标升级后，下月1日可获得100元 金牌临时工升级方法： 1.当月完成金牌各项指标，用户等级立即生效，有效期至 次月月底
				2.当月购买金牌权益，用户等级立即生效，有效期至 本月月底 金牌临时工的限制： 1.当月差评数不可以大于2个，否则金牌将立即失效，次月才可以重新报名 2.购买金牌权益费用，在生效后，不会进行退还
			</text>
		</view>
		<view class="hg-128" v-if="jinpaiType==1&&vipFlag==0"></view>
		<view class="kaitong-button" v-if="jinpaiType==1&&vipFlag==0" @click="isPay()">
			<view class="kaitong-button-content">
				<text class="kaitong-button-content-text">{{Gold_medal_amount/100}}元开通</text>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		get_property_list_by_type
	} from '@/libs/unit.js'
	export default {
		props: {
			jinpaiType: 0,
			vipFlag: 0,
		},
		data() {
			return {
				Gold_medal_amount: 0,
				bad: 1, //差评数
				textlie: 0,
				list: {
					mTime: '',
					mDay: '',
					mBadLimit: '',
					alreadyTime: '',
					alreadyDay: '',
					alreadyBad: '',
					numberuserid: '',
					isShowJindu: true,
				}
			}
		},
		methods: {
			// 获取当月活动
			async get_current_activity() {
				let res = await this.$fetch(this.$api.get_current_activity, {}, 'POST')
				let ress = await this.$fetch(this.$api.property_list_by_type, {
					type: 1
				}, 'POST')
				/* console.log('获取当月活动res', res.data) */
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.textlie = ress.data.Release_num
				if (!res.data.userActivity) {
					this.list = res.data.activity ? res.data.activity : {}
				} else {
					this.list = res.data.userActivity ? res.data.userActivity : {}
				}
				this.list.alreadyBad = this.list.alreadyBad ? this.list.alreadyBad : 0
				this.list.alreadyDay = this.list.alreadyDay ? this.list.alreadyDay : 0
				this.list.alreadyTime = this.list.alreadyTime ? this.list.alreadyTime : 0
				this.list.numberuserid = this.list.numberuserid ? this.list.numberuserid : 0
			},
			isPay() {
				if (this.vipFlag == 1) {
					uni.showToast({
						title: '您已经是金牌会员了，无需开通',
						icon: 'none'
					})
				} else {
					this.$emit('isPay');
				}
			},
			goJipaiTask() {
				if (this.vipFlag == 1) {
					uni.navigateTo({
						url: '/pages/jinpai-task/jinpai-task'
					})
				} else {
					uni.showToast({
						title: '你还不是金牌临时工',
						icon: 'none'
					})
				}
			},
			async get_property_list() {
				if (uni.getStorageSync('property_list_by_type').Gold_medal_amount) {
					this.Gold_medal_amount = uni.getStorageSync('property_list_by_type').Gold_medal_amount
				} else {
					let res = await get_property_list_by_type()
					this.Gold_medal_amount = res.Gold_medal_amount
				}
			},
		},
		beforeMount() {
			this.isShowJindu = this.list.alreadyBad < this.list.mBadLimit && this.list.numberuserid >= thius.textlie &&
				this.list.alreadyTime >= this.list.mTime && this.list.alreadyDay >= this.list.mDay ? false : true
			this.get_property_list()
			this.get_current_activity()
		},
	}
</script>
<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 48rpx;
	}

	.banner {
		width: 690rpx;
		height: 128rpx;
		background: url(http://images.linglinggong.net/icon3/123213.png);
		background-repeat: round;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.banner-image {
		width: 86rpx;
		height: 90rpx;
		margin-left: 24rpx;
		margin-top: 19rpx;
	}

	.banner-text {
		height: 78rpx;
		width: 260rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin: 28rpx 28rpx;
		flex-grow: 1;

		&>view:nth-child(1) {
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			background: linear-gradient(-90deg, #FEDBBA 0%, #FFF8EB 99.12109375%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		&>view:nth-child(2) {
			font-size: 24rpx;
			line-height: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			background: linear-gradient(-90deg, #FEDBBA 0%, #FFF8EB 99.12109375%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.banner-yellow {
		width: 690rpx;
		height: 102rpx;
		background: #FCC928;
		border-radius: 12rpx 12rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.banner-button {
		width: 180rpx;
		height: 60rpx;
		background: linear-gradient(-90deg, #FEDBBA, #FFF8EB);
		border-radius: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FF201A;
		line-height: 60rpx;
		text-align: center;
		margin-top: 34rpx;
		margin-right: 24rpx;
	}

	.banner-yellow-content {
		width: 642rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.banner-yellow-content-image {
		width: 163rpx;
		height: 16rpx;
	}

	.banner-yellow-content-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #2F0E00;
	}

	.banner-yellow-info {
		width: 690rpx;
		height: 454rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
		border-radius: 0 0 12rpx 12rpx;
	}

	.banner-yellow-info-item {
		width: 642rpx;
		height: 60rpx;
		margin-top: 44rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		&>view:nth-child(1) {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
	}

	.banner-yellow-info-item-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
	}

	.banner-yellow-info-item-title-info {
		font-size: 28rpx;
		font-weight: 500;
		color: #515151;
	}

	.banner-yellow-info-item-num {
		font-size: 28rpx;
		font-weight: bold;
		color: #F39B19;
	}

	.banner-yellow-info-item-nums {
		font-size: 28rpx;
		font-weight: bold;
		color: #F39B19;
	}

	.banner-yellow-info-item-num-r {
		font-size: 28rpx;
		font-weight: bold;
		color: #FF3429;
	}

	.banner-yellow-info-item-nums-r {
		font-size: 28rpx;
		font-weight: bold;
		color: #FF3429;
	}

	.banner-yellow-info-item-jindu-y {
		height: 8rpx;
		background: linear-gradient(-90deg, #FCC928, #F39B19);
		border-radius: 4rpx;
		position: absolute;
	}

	.banner-yellow-info-item-jindu-r {
		height: 8rpx;
		background: #FF382D;
		border-radius: 4rpx;
		position: absolute;
	}

	.banner-yellow-info-item-jindu-n {
		width: 642rpx;
		height: 8rpx;
		background: #F2F2F2;
		border-radius: 4rpx;
	}

	.putongquanyi {
		width: 690rpx;
		height: 280rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
	}

	.putongquanyi-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		display: inline-block;
		margin: 24rpx 36rpx;
	}

	.putongquanyi-content {
		width: 558rpx;
		height: 150rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0 auto;
	}

	.putongquanyi-content-item {
		width: 90rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		text-align: center;
		align-items: center;
		font-size: 22rpx;
		font-weight: 500;
		color: #515151;
		line-height: 30rpx;

		&>image {
			text-align: center;
			width: 83rpx;
			height: 83rpx;
		}
	}

	.shuoming {
		width: 690rpx;
		// height: 201rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;

		&>text:nth-child(1) {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			display: block;
			margin: 24rpx 36rpx;
		}

		&>text:nth-child(2) {
			width: 640rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #515151;
			line-height: 30px;
			margin-left: 36rpx;
			display: block;
			margin-bottom: 20rpx;
		}
	}

	.jinpaiquanyi {
		width: 690rpx;
		height: 460rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
	}

	.jinpaiquanyi-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		display: block;
		margin: 36rpx 0 28rpx 24rpx;
	}

	.jinpaiquanyi-content {
		height: 332rpx;
		width: 648rpx;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		align-content: space-between;
		flex-wrap: wrap;
	}

	.jinpaiquanyi-item {
		width: 90rpx;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin: 0 36rpx;
		font-size: 22rpx;
		font-weight: 500;
		text-align: center;
		color: #515151;

		&>image {
			width: 83rpx;
			height: 82rpx;
		}
	}

	.jinpai_button {
		width: 690rpx;
		height: 128rpx;
		// background-color: #F5DDB9;
		background-image: url('http://images.linglinggong.net/icon3/hjk4r5tkht54jk.png');
		background-size: cover;
		border-radius: 12rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&>image:nth-child(1) {
			width: 83rpx;
			height: 82rpx;
			margin-left: 24rpx;
			margin-right: 16rpx;
		}
	}

	.jinpai_button-text {
		width: 360rpx;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
	}

	.jinpai_button-text-title {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: bold;
		color: #A86C24;
	}

	.jinpai_button-text-info {
		font-size: 24rpx;
		line-height: 24rpx;
		font-weight: 400;
		color: #A86C24;
	}

	.jinpai_button-text-back {
		width: 17rpx;
		height: 29rpx;
		margin-right: 24rpx;
	}

	.jinpai-shuoming {
		width: 690rpx;
		// height: 298rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: 20rpx;

		&>text:nth-child(1) {
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
			display: block;
			margin: 24rpx 36rpx;
		}

		&>text:nth-child(2) {
			display: block;
			margin-left: 36rpx;
			margin-right: 36rpx;
			margin-top: 28rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #515151;
			line-height: 48rpx;
			margin-bottom: 20rpx;
		}
	}

	.kaitong-button {
		width: 750rpx;
		height: 88rpx;
		// background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.kaitong-button-content {
		width: 750rpx;
		height: 88rpx;
		background: linear-gradient(-90deg, #FF5628, #FF231C);
		// border-radius: 12rpx;
		text-align: center;
	}

	.kaitong-button-content-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 88rpx;
		// text-shadow: 0px 0px 8rpx rgba(147, 3, 0, 0.4);
		background: linear-gradient(-90deg, #FEDBBA 0%, #FFF8EB 99.12109375%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.jinpai_button-text-title-fuben {
		width: 80rpx;
		height: 30rpx;
		background: linear-gradient(90deg, #FF5543, #FD2C16);
		border-radius: 25rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 30rpx;
		text-align: center;
		margin-left: 12rpx;
	}

	.jinpai_button-text-title-view {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}
</style>
